import React, { Component } from 'react'
import './homePage.scss'
import moonDark from '../../common/images/moon_dark.png'
import monnLight from '../../common/images/moon_light.png'
import search1 from '../../common/images/icon_search.png'
import search2 from '../../common/images/icon_search2.png'
import arrow1 from '../../common/images/arrow_down.png'
import arrow2 from '../../common/images/arrow_down2.png'
import flag1 from '../../common/images/img1.png'
import flag2 from '../../common/images/img2.png'
import flag3 from '../../common/images/img3.png'
import flag4 from '../../common/images/img4.png'
import flag5 from '../../common/images/img5.png'
import flag6 from '../../common/images/img6.png'
import flag7 from '../../common/images/img7.png'
import flag8 from '../../common/images/img8.png'
import { Link } from 'react-router-dom';

//导入请求的api

//导入本地数据
import { data } from '../../common/js/data.js'

export default class HomePage extends Component {
    constructor(props) {
        super(props);
        this.state = {
            mode: localStorage.getItem("mode") || 1, // 1 dark 2 light
            flags: [{flag: flag1}, {flag: flag2}, {flag: flag3}, {flag: flag4}, {flag: flag5}, {flag: flag6}, {flag: flag7}, {flag: flag8},],
            showSelecter: 0,
            selectedValue: 'Filter by Region',
            keywords: '',
        }
    }

    componentDidMount() { // 生命周期 类似mounted

    }

    changeMode() {
        if (this.state.mode === 1) {
            this.setState({mode: 2})
            localStorage.setItem("mode", 2);
        } else {
            this.setState({mode: 1})
            localStorage.setItem("mode", 1);
        }
    }

    changeArea() {
        this.setState({showSelecter: !this.state.showSelecter})
    }

    selectArea(area) {
        this.setState({showSelecter: !this.state.showSelecter})
        this.setState({selectedValue: area})

        //发起请求
        // request_all({}).then(res=>{console.log(res)})
        console.log(data[0]);
        // for (var i = 0; i < data.length; i++) {
        // 	if(data[i].name.common == this.props.location.state){

        // 	}
        // }
    }

    clickSelecterMask(flag) {
        this.setState({showSelecter: false})
    }

    clickSearch(flag) {
        // console.log(document.getElementById("keywords").value);
        this.setState({keywords: document.getElementById("keywords").value})
    }

    render() {
        const {mode, flags, showSelecter, selectedValue, keywords} = this.state
        return (
            <div className={['home-page', mode === 1 ? '' : 'light'].join(' ')}>
                <div className="header acea-row">
                    <div className="main-row acea-row row-between-wrapper">
                        <div className="nav-title">Where in the world</div>
                        <div className="acea-row row-middle mode-btn" onClick={this.changeMode.bind(this)}>
                            {mode === 1 ? <img className="moon" src={moonDark}/> : <img className="moon" src={monnLight}/>}
                            <div>Dark Mode</div>
                        </div>
                    </div>
                </div>
                <div className="main-row">
                    <div className="acea-row row-between-wrapper">
                        <div className="search-wrap acea-row row-middle">
                            <div className="btn-search" onClick={this.clickSearch.bind(this, 'All')}>
                                {mode === 1 ? <img className="search-icon" src={search1}/> : <img className="search-icon" src={search2}/>}
                            </div>
                            <input id="keywords" className="search-input" placeholder="Search for a country..."/>
                        </div>
                        <div className="search-wrap-selecter">
                            <div className="selecter-top" onClick={this.changeArea.bind(this)}>
                                {selectedValue}
                            </div>
                            {mode === 1 ? <img className="arrow-icon" src={arrow1}/> : <img className="arrow-icon" src={arrow2}/>}
                            {showSelecter ?
                                <div className="selecter-pop">
                                    <div className="selecter-pop-item" onClick={this.selectArea.bind(this, 'All')}>All</div>
                                    <div className="selecter-pop-item" onClick={this.selectArea.bind(this, 'Africa')}>Africa</div>
                                    <div className="selecter-pop-item" onClick={this.selectArea.bind(this, 'Americas')}>Americas</div>
                                    <div className="selecter-pop-item" onClick={this.selectArea.bind(this, 'Asia')}>Asia</div>
                                    <div className="selecter-pop-item" onClick={this.selectArea.bind(this, 'Europe')}>Europe</div>
                                    <div className="selecter-pop-item" onClick={this.selectArea.bind(this, 'Oceania')}>Oceania</div>
                                </div> : ''}
                        </div>
                    </div>
                    <div className="flag-list acea-row row-between-wrapper">
                        {data.map((item, index) =>
                            ((selectedValue == item.region || selectedValue == 'All' || selectedValue == 'Filter by Region') && (keywords == '' || item.name.common.indexOf(keywords) > -1)) ?
                                <Link to={{pathname: '/detail', state: item.name.common}} className="flag-item">
                                    <img className="flag-img" src={item.flags.png}/>
                                    <div className="flag-info">
                                        <div className="flag-name">{item.name.common}</div>
                                        <div className="flag-desc">Population: <span>{item.population}</span></div>
                                        <div className="flag-desc">Region: <span>{item.region}</span></div>
                                        <div className="flag-desc">Capital: <span>{item.capital}</span></div>
                                    </div>
                                </Link>
                                : ''
                        )}

                        {[1, 2, 3, 4, 5].map((item, index) => <div className="flag-item-block"></div>)}
                    </div>
                </div>
                {showSelecter ?
                    <div className="selecter_mask" onClick={this.clickSelecterMask.bind(this, 'close')}></div>
                    : ''
                }
            </div>
        )
    }
}
